<script lang="ts" name="EmotionalStateAssess" setup>
import {onBeforeMount, ref, watch} from 'vue'
import dDialog from '@/components/dDialog/dDialog.vue'
import {ElMessage} from 'element-plus'
import {useRoute} from 'vue-router'
const route = useRoute()
// 禁止编辑
const disEdit = ref<boolean>(Boolean(route.query.disEdit))

const props = defineProps({
  //显示
  showDialog: {
    type: Boolean,
    required: true
  },
  // 老年人情感状态明细
  odEmotionScore: {
    type: String,
    required: true
  }
})

const emits = defineEmits(['close', 'confirm'])

// 题目单选
interface Question {
  title: string // 问题
  value: string // 值
}

// 题目列表
const questionList = ref<Array<Question>>([
  {title: '你对生活基本上满意吗？', value: ''},
  {title: '你是否已经放弃了许多活动和兴趣？', value: ''},
  {title: '你是否觉得生活空虚？', value: ''},
  {title: '你是否感到厌倦？', value: ''},
  {title: '你觉得未来有希望吗？', value: ''},
  {title: '你是否因为脑子里有一些想法摆脱不掉而烦恼？', value: ''},
  {title: '你是否大部分时间精力充沛？', value: ''},
  {title: '你是否害怕会有不幸落在你头上？', value: ''},
  {title: '你是否大部分时间感到幸福？', value: ''},
  {title: '你是否感到孤立无援？', value: ''},
  {title: '你是否经常坐立不安，心烦意乱？', value: ''},
  {title: '你是否希望呆在家里而不愿意去做些新鲜事？', value: ''},
  {title: '你是否常常担心将来？', value: ''},
  {title: '你是否觉得记忆力比以前差？', value: ''},
  {title: '你是否觉得现在活着很精彩？', value: ''},
  {title: '你是否经常感到垂头丧气无精打采？', value: ''},
  {title: '你是否感到你现在很没用？', value: ''},
  {title: '你是否为过去的事担心很多？', value: ''},
  {title: '你觉得生活很兴奋吗？', value: ''},
  {title: '你是否觉得学习新鲜事物很困难吗？', value: ''},
  {title: '你觉得精力充沛吗？', value: ''},
  {title: '你觉得你的现状是毫无希望的吗？', value: ''},
  {title: '你是否觉得大部分人都比你活得好？', value: ''},
  {title: '你是否经常把小事情都弄得很糟糕？', value: ''},
  {title: '你经常有想哭的感觉吗？', value: ''},
  {title: '你对集中注意力有困难吗？', value: ''},
  {title: '你喜欢每天早晨起床的感觉吗？', value: ''},
  {title: '你是否宁愿不参加社交活动？', value: ''},
  {title: '你做决定容易吗？', value: ''},
  {title: '你的头脑还和以前一样清楚吗？', value: ''}
])

// 总分
const totalScore = ref<number>(0)
// 得分明细
const scoreDetails = ref<Array<string>>([])

/**
 * @description: 设置得分详情单选框值
 * @return {*}
 */
const setOdEmotionScore = () => {
  const arr = props.odEmotionScore?.split('|') || []
  if (arr.length) {
    arr.forEach((item, index) => {
      questionList.value[index].value = item
    })
  }
}

/**
 * @description: 关闭弹窗
 * @return {*}
 */
const onCancel = () => {
  emits('close')
}
/**
 * @description: 关闭弹窗
 * @return {*}
 */
const onClose = () => {
  emits('close')
}

/**
 * @description: 保存
 * @return {*}
 */
const onConfirm = () => {
  scoreDetails.value.length = 0
  for (let i = 0; i < questionList.value.length; i++) {
    const question = questionList.value[i]
    // 有一项为空值就退出循环
    if (!question.value) {
      ElMessage.warning('请检查问题是否全部评估完成!')
      return
    } else {
      scoreDetails.value.push(question.value)
    }
  }
  // 得分明细
  emits('confirm', {scoreDetails: scoreDetails.value.join('|'), totalScore: totalScore.value})
  emits('close')
}

// 回答为“否”的被认为是抑郁反映的问题（即选择“否”，计一分）：1、5、7、9、15、19、21、27、29、30；
const scoreNumList: Array<number> = [1, 5, 7, 9, 15, 19, 21, 27, 29, 30]

// 回答为“是”的被认为是抑郁反映的问题（即选择“是”，计一分）：2、3、4、6、8、10、11、12、13、14、16、17、18、20、22、23、24、25、26、28；
const scoreNumList2: Array<number> = [2, 3, 4, 6, 8, 10, 11, 12, 13, 14, 16, 17, 18, 20, 22, 23, 24, 25, 26, 28]

watch(
  () => questionList.value,
  () => {
    totalScore.value = 0
    // 计算总分
    questionList.value.forEach((item, index) => {
      if (item.value === '2' && scoreNumList.indexOf(index + 1) !== -1) {
        totalScore.value++
      } else if (item.value === '1' && scoreNumList2.indexOf(index + 1) !== -1) {
        totalScore.value++
      }
    })
  },
  {deep: true}
)

onBeforeMount(() => {
  setOdEmotionScore()
})
</script>
<template>
  <d-dialog
    title="老年人情感状态评估"
    :show-dialog="showDialog"
    :width="650"
    custom-class="emotional-state-assess"
    :hide-save-btn="disEdit"
    @cancel="onCancel"
    @close="onClose"
    @confirm="onConfirm"
  >
    <div class="emotional-state-assess-box">
      <p class="title">
        选择最切合您最近一周来的感受的答案
      </p>
      <el-scrollbar height="550px">
        <ul>
          <li v-for="(item, index) in questionList" :key="item.title">
            <div>
              <span>{{ index + 1 }}.</span><span>{{ item.title }}</span>
            </div>
            <el-radio-group v-model="item.value" :disabled="disEdit">
              <el-radio label="1">
                是
              </el-radio>
              <el-radio label="2">
                否
              </el-radio>
            </el-radio-group>
          </li>
        </ul>
      </el-scrollbar>
      <div class="total-score">
        总分：{{ totalScore }}
      </div>
    </div>
  </d-dialog>
</template>
<style scoped lang="less">
.total-score {
  margin-top: 11px;
  text-align: right;
  font-weight: bold;
}
.emotional-state-assess-box {
  padding: 0 10px 0 30px;
}
.emotional-state-assess {
  .title {
    font-weight: bold;
  }
  ul {
    list-style: none;
    padding-left: 0;
    li {
      height: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 20px;
    }
  }
}
</style>
